<script setup>
	import {
		ref,
		onMounted,
		computed
	} from 'vue';
	import axios from 'axios';
	import router from '@/router/index.js';
	import {
		addMsg,
		getMsgList,
		logout
	} from '@/api/getData.js';
	import {
		setStorage,
		getStorage
	} from "@/utils/localStorage.js";
	import index from "vuex";
	import {
		Tab
	} from 'bootstrap';
	import {
		h
	} from 'vue'
	import {
		ElNotification
	} from 'element-plus'

	// 定义一个响应式变量 size，用来存储组件的大小
	const size = ref('default');

	// 计算属性 iconStyle，根据 size 的值来设置 margin-right 的样式
	const iconStyle = computed(() => {
		const marginMap = {
			large: '8px',
			default: '6px',
			small: '4px',
		};
		return {
			marginRight: marginMap[size.value] || marginMap.default,
		};
	});

	// 计算属性 blockMargin，根据 size 的值来设置 margin-top 的样式
	const blockMargin = computed(() => {
		const marginMap = {
			large: '50px',
			default: '28px',
			small: '24px',
		};
		return {
			marginTop: marginMap[size.value] || marginMap.default,
		};
	});

	// 响应式数据
	const tableData = ref([]); //渲染数据
	const allData = ref([]); //全部数据
	let currentPage = ref(1); // 当前页数
	let pageSize = ref(5); // 每页显示条数
	let total = ref(0); // 数据总条数
	const senders = ref([]);
	const selectedSender = ref(''); // 新增：选定的发送者
	const count = ref(0)
	const loading = ref(false); // 新增：加载状态

	// 使用 onMounted 钩子函数获取数据
	onMounted(() => {
		getMsgData();
	});

	// 获取消息列表数据
	const getMsgData = async () => {

		// 从本地缓存中获取当前用户的信息
		const currentUser = JSON.parse(getStorage('userInfo'));
		const currentUserName = currentUser.user.username; // 假设当前用户的 ID 是在 userInfo 中的 userId 字段
		let currentUserId = currentUser.user.userId;
		let params = {
			receiverId: currentUserId
		}
		console.log(currentUser)
		loading.value = true; // 设置加载状态为 true

		const response = await getMsgList(params);
		tableData.value.push(...response.datas); // 更新表格数据
		total.value = response.total; // 更新数据总条数
		loading.value = false; // 设置加载状态为 false

		console.log(tableData.value); // 打印整个数据数组
		console.log(tableData.value[0]); // 打印数组中的第一个元素
		console.log(tableData.value[0].message.content); // 打印第一个消息的内容


		console.log(currentUser.user.username);
		// 筛选出 receiver 是当前用户 ID 的消息中的 sender
		const senderSet = new Set();
		tableData.value.forEach(item => {
			console.log(item.receiver.username.slice(0, 2));
			if (item.receiver.username.slice(0, 2) === currentUserName) {
				senderSet.add(item.sender.username);
			}
		});
		senders.value = Array.from(senderSet);
		//赋值数据
		allData.value = tableData.value;
		console.log("asdaadsdasd"+senders.value.length)
		senderslength = senders.value.length
	};



	// 处理发送者选择
	const handleSenderSelect = (sender) => {
		console.log(sender)
		tableData.value = [];
		//筛选数据
		tableData.value = allData.value.filter((item, index) => {
			return item.sender.username == sender;
		})
		console.log(tableData.value)
	};

	const DialogVisible = ref([]) //显示详细留言文本框
	const input = ref('') //回复输入框

	const cancelReply = (index) => {
		DialogVisible.value[index] = false
		ElNotification({
			title: 'Info',
			message: h('i', {
				style: 'color: teal'
			}, '发送已取消'),
			type: 'info',
			duration: 1000,
			offset: 100
		})
	}

	const replyData = ref({})
	const comfirmReply = (item, index) => {
		console.log(item.sender.userId)
		console.log(item.receiver.userId)
		replyData.value.senderId = item.sender.userId,
			replyData.value.receiverId = item.receiver.userId,
			replyData.value.content = input.value,
			replyData.value.messageType = "文字",

			addMsg(replyData.value)
		console.log(replyData.value)

		ElNotification({
			title: 'Success',
			message: h('i', {
				style: 'color: teal'
			}, '消息发送成功'),
			type: 'success',
			duration: 1000,
			offset: 100
		})
	}

	// 新增：滚动处理方法
	const handleScroll = () => {
		const container = this.$refs.scrollContainer;
		if (container.scrollTop + container.clientHeight >= container.scrollHeight - 10) {
			if (!loading.value && tableData.value.length < total.value) {
				currentPage.value++;
				getMsgData();
			}
		}
	};
	
	let senderslength = ref(0);
</script>

<template>
	<div class="main-content">
		
		<div class="sub-content">
			<el-radio-group v-model="size">
				<el-radio value="large" class="radio-font">大窗口</el-radio>
				<el-radio value="default" class="radio-font">默认窗口</el-radio>
				<el-radio value="small" class="radio-font">小窗口</el-radio>
			</el-radio-group>

			<div class="dropdown-container"  v-if = "senderslength !=1 " >
				
				<el-dropdown @command="handleSenderSelect">
					<span class="el-dropdown-link">
						请选择发送者姓名<el-icon class="el-icon--right"><arrow-down /></el-icon>
					</span>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item v-for="(sender, index) in senders" :key="index" :command="sender">
								{{ sender }}
							</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>
			<div class="votetable" @scroll="handleScroll" ref="scrollContainer">


				<el-descriptions v-for="(item, index) in tableData" :key="index" title="聊天记录"
					class="margin-top description-table" :column="2" :size="size" border>

					<el-descriptions-item label="发送者">
						{{ item.sender.username }}
					</el-descriptions-item>
					<el-descriptions-item label="发送时间">
						{{ item.message.createdAt}}
					</el-descriptions-item>
					<el-descriptions-item label="文本内容">
						{{ item.message.content }}
					</el-descriptions-item>

					<el-descriptions-item label="获取详情">
						<el-button plain @click="DialogVisible[index] = true">
							Click to open the Dialog
						</el-button>
						<el-dialog v-model="DialogVisible[index]" title="详细文本" width="30%" draggable='true'
							custom-class="custom-dialog">
							<div class="senderMessageDialog">
								<span class="sender-name">{{ item.sender.username }} :</span>
								<span class="message-content">{{ item.message.content }}</span>
							</div>

							<div class="replyMessageDialog">
								<span class="reply-label">回复消息: </span>
								<el-input v-model="input" class="reply-input" placeholder="请输入" clearable
									type="textarea" style="height: 100%" />
							</div>

							<template #footer>
								<div class="dialog-footer">
									<el-button plain @click="cancelReply(index)"> 取消回复 </el-button>
									<el-button plain @click="comfirmReply(item,index)"> 确认回复 </el-button>
								</div>
							</template>
						</el-dialog>
					</el-descriptions-item>
				</el-descriptions>
			</div>
		</div>
	</div>
</template>

<style scoped>
	.votetable {
		width: 80%;
		height: 650px;
		/* 固定高度 */
		overflow-y: auto;
		/* 溢出滚动 */
		scrollbar-width: none;
		/* 隐藏Firefox的滚动条 */
		-ms-overflow-style: none;
		/* 隐藏Internet Explorer和Edge的滚动条 */
		border: 50px, solid, red;
	}

	.votetable::-webkit-scrollbar {
		display: none;
		/* 隐藏Chrome, Safari和Opera的滚动条 */
	}


	.custom-dialog .el-dialog__header {
		background-color: #f0f0f0;
		font-size: 18px;
		font-weight: bold;
		padding: 15px 20px;
		border-bottom: 1px solid #ebebeb;
	}

	.custom-dialog .el-dialog__body {
		padding: 20px;
	}

	.senderMessageDialog {
		margin-bottom: 20px;
		font-size: 16px;
		background-color: #f9f9f9;
		padding: 10px;
		border-radius: 4px;
	}

	.sender-name {
		font-size: 18px;
		color: #333;
		margin-right: 5px;
	}

	.message-content {
		font-size: 16px;
		color: #666;
	}

	.replyMessageDialog {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.reply-label {
		margin-bottom: 10px;
		font-size: 16px;
		color: #333;
	}

	.reply-input {
		font-size: 18px;
		width: 100%;
		height: 180px;
		border: 3px solid #dcdfe6;
		border-radius: 4px;
		padding: 10px;
	}

	.dialog-footer {
		display: flex;
		justify-content: flex-end;
		padding: 10px 20px;
		border-top: 1px solid #ebebeb;
	}

	.cancel-button {
		color: #909399;
		border: 1px solid #dcdfe6;
		background-color: #fff;
	}

	.cancel-button:hover {
		color: #606266;
		border-color: #c0c4cc;
	}

	.confirm-button {
		color: #fff;
		background-color: #409eff;
		border-color: #409eff;
		margin-left: 10px;
	}

	.confirm-button:hover {
		background-color: #66b1ff;
		border-color: #66b1ff;
	}

	.confirm-button:focus {
		background-color: #66b1ff;
		border-color: #66b1ff;
	}





	.sub-content {
		/* background-color: wheat; */
		padding: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* 水平居中 */
		justify-content: center;
		/* 垂直居中 */
		border-radius: 5px;
		border-radius: 10px;
		box-shadow: 0px 0px 10px 0px rgb(148, 148, 148);
	}

	.dropdown-container {

		width: 80%;
		display: flex;
		justify-content: flex-start;
		/* 使 Dropdown List 靠右 */
		margin-top: 10px;

	}

	.el-dropdown-link {
		color: black;
		font-size: 20px;
		font-weight: 700;
		margin-bottom: 20%;
	}

	.votetable {
		/* background-color: dimgrey; */
		border: black;
		border-width: 20px;
		margin-top: 0px;
		width: 80%;
	}

	.description-table {
		margin: 20px;
		padding:10px;
		border-radius: 10px;
		box-shadow: 0px 0px 10px 0px rgb(148, 148, 148);
	}

	.el-descriptions__title {
		text-align: left;
		font-size: 16px;
		font-weight: bold;
	}

	.el-descriptions__label {
		text-align: center;
		background-color: #f5f5f5;
		font-weight: bold;
	}

	.el-descriptions__cell {
		text-align: center;
	}
</style>